<template>
  <div class="layout-page bg-#f8f9fe">
    <div class="top h-207px">
      <div class="w-1328px mx-auto box-border pt-53px flex">
        <img
          :src="userStore.userAvatar"
          alt=""
          class="w-80px h-80px b-rd-40px mr-18px object-cover cursor-pointer"
          @click="updateAvatar"
        />
        <div class="flex-1 flex flex-col">
          <div class="flex items-center mb-12px">
            <h3 class="font-size-24px fw-700 lh-35px">
              {{ userInfo.nickName }}
            </h3>
            <span class="font-size-18px ml-12px">{{ userInfo.userName }}</span>
          </div>
          <div class="flex items-center">
            <Auth />
            <div
              class="ml-22px inline-flex items-center cursor-pointer"
              @click="editVisible = true"
            >
              <el-icon class="font-size-12px"><Edit /></el-icon>
              <span class="text-light ml-6px font-size-14px">编辑</span>
            </div>
          </div>
          <div class="mt-20px flex lh-20px">
            <div class="flex flex-col">
              <span class="text-light mb-5px">来源:</span>
              <span class="text-sub">{{
                SOURCE_FROM_ENUM[userInfo.userFrom] || ""
              }}</span>
            </div>
            <div class="flex flex-col ml-140px">
              <span class="text-light mb-5px">用户类型:</span>
              <span class="text-sub">{{
                USER_TYPE_ENUM[userInfo.userType] || ""
              }}</span>
            </div>
            <div class="flex flex-col ml-140px">
              <span class="text-light mb-5px">邮箱:</span>
              <span class="text-sub">{{ userInfo.email }}</span>
            </div>
            <div class="flex flex-col ml-140px">
              <span class="text-light mb-5px">注册时间:</span>
              <span class="text-sub">{{
                userInfo.createTime?.slice(0, 10)
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-#fff">
      <div class="w-1328px mx-auto">
        <el-tabs v-model="active" class="user-center-tabs">
          <el-tab-pane label="资源申请" name="application">
            <template #label>
              <span class="inline-flex items-center">
                资源申请
                <el-tooltip
                  effect="light"
                  content="自己对企业供应信息发出的申请记录，记录内包含企业联系方式，可与对应企业电话联系"
                  placement="top-start"
                  ><el-icon size="16" class="ml-3px"><QuestionFilled /></el-icon
                ></el-tooltip>
              </span>
            </template>
          </el-tab-pane>
          <el-tab-pane label="合作申请" name="cooperation">
            <template #label>
              <span class="inline-flex items-center">
                合作申请
                <el-tooltip
                  effect="light"
                  content="企业对自己发布的需求信息，提出的合作请求，可与对应企业进行电话联系"
                  placement="top-start"
                  ><el-icon size="14" class="ml-3px"><QuestionFilled /></el-icon
                ></el-tooltip>
              </span>
            </template>
          </el-tab-pane>
          <el-tab-pane label="我的需求" name="demand" lazy></el-tab-pane>
          <el-tab-pane label="我的模型" name="model" lazy></el-tab-pane>
          <el-tab-pane label="我的数据集" name="dataSource" lazy></el-tab-pane>
          <el-tab-pane label="我的订阅" name="subscribe" lazy></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="w-1328px mx-auto py-25px">
      <keep-alive>
        <Application v-if="active === 'application'" />
      </keep-alive>
      <keep-alive>
        <Cooperation v-if="active === 'cooperation'" />
      </keep-alive>
      <keep-alive>
        <Demand v-if="active === 'demand'" />
      </keep-alive>
      <keep-alive>
        <Model v-if="active === 'model'" />
      </keep-alive>
      <keep-alive>
        <DataSource v-if="active === 'dataSource'" />
      </keep-alive>
      <keep-alive>
        <Subscribe v-if="active === 'subscribe'" />
      </keep-alive>
    </div>
    <EditPopup v-model="editVisible" @close="editVisible = false" />
  </div>
</template>

<script setup>
import { Edit, QuestionFilled } from "@element-plus/icons-vue";
import { SOURCE_FROM_ENUM, USER_TYPE_ENUM } from "@/const";
import { useUserStore } from "@/store";
import { getFile, file2Blob } from "@/utils/dom";
import {
  Application,
  Cooperation,
  Demand,
  Model,
  DataSource,
  Auth,
  EditPopup,
  Subscribe,
} from "./components";

const userStore = useUserStore();
const userInfo = computed(() => userStore?.userInfo || {});
const $api = inject("$api");

const route = useRoute();
const active = ref(route.query.active || "application");

const editVisible = ref(false);

const updateAvatar = async () => {
  const file = await getFile();
  const blobFile = await file2Blob(file);
  const formData = new FormData();
  formData.append("avatarfile", blobFile, "fileName");
  const { imgUrl } = await $api.system.updateUserAvatar(formData);
  ElMessage.success("头像修改成功");
  userStore.updateUserInfo({
    avatar: imgUrl,
  });
};
</script>

<style scoped lang="less">
.top {
  background: url("/user-center-bg.png") no-repeat center;
}
</style>
